<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <title>DesignPortfolio</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">

	    <!-- Styles -->
	    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' >
	    <link href="css/bootstrap.css" rel="stylesheet">
	    <link href="css/responsive.bootstrap.css" rel="stylesheet">
	    <link href="css/screen.css" rel="stylesheet">

	    <!--[if lt IE 9]>
	      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	    <!-- Faviocon and touch -->
	    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="#">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="#">
	      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="#">
	                    <link rel="apple-touch-icon-precomposed" href="#">
	                                   <link rel="shortcut icon" href="img/favicon/favicon.ico">

	</head>
	<body>


			<!-- START SETTINGS BOX -->
			<div class="customPanel customPanelClosed">
				  <div class="customPanelOptions">
					    Site Color<br />
					    <div class="customPanelOptionsPickerButton customPanelOptionsPickerButtonSite"></div>
					    <div style="clear:both;"></div>
				  </div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerBackground"></div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerSite"></div>
				  <div class="customPanelButton"></div>
			</div>
			<!-- END SETTINGS BOX --> 


		<header>
			<div class="navTop">
				<div class="container">
					<div class="row">
						<nav class="span12">
							<ul class="clearfix unstyled pull-right">
								<li>
									<a href="#" title="twitter">Twitter</a>
								</li>
								<li>
									<a href="#" title="Flckr">Flckr</a>
								</li>
								<li>
									<a href="#" title="Facebook">Facebook</a>
								</li>
								<li>
									<a href="#" title="Google+">Google+</a>
								</li>
							</ul>
						</nav><!-- /nav -->
					</div><!-- /.row [TopNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.navTop -->

			<div class="mainNav">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="index-2.html" class="brand">Design Portfolio</a>
						</div>
						<nav class="span8 clearfix navbar-inner">
							<a class="btn btn-color menuMobile" data-toggle="collapse" data-target=".nav-collapse">menu</a>
						    <div class="nav-collapse collapse">
								<ul class="nav inline pull-right menu">
									<li>
										<a href="#">Home</a>
										<ul class="unstyled">
											<li><a href="index-2.html">Home default</a></li>
											<li><a href="home_1.html">Home var1</a></li>
											<li><a href="home_2.html">Home var2</a></li>
										</ul>
									</li>
									<li class="active">
										<a href="#">Pages</a>
										<ul class="unstyled">
											<li><a href="about_us.html">About us</a></li>
											<li><a href="service.html">Services</a></li>
											<li><a href="faq.html">Faq</a></li>
											<li><a href="features.html">Features</a></li>
											<li><a href="error_404.html">error 404</a></li>
											<li><a href="full_width.html">Full width</a></li>
											<li><a href="right_sidebar.html">Right sidebar</a></li>
											<li><a href="left_sidebar.html">Left sidebar</a></li>
										</ul>
									</li>
									<li>
										<a href="#">GALLERY</a>
										<ul class="unstyled">
											<li><a href="gallery_2.html">Gallery 2 columns</a></li>
											<li><a href="gallery_3.html">Gallery 3 columns</a></li>
											<li><a href="gallery_4.html">Gallery 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">PORTFOLIO</a>
										<ul class="unstyled">
											<li><a href="portfolio_2.html">Portfolio 2 columns</a></li>
											<li><a href="portfolio_3.html">Portfolio 3 columns</a></li>
											<li><a href="portfolio_4.html">Portfolio 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">BLOG</a>
										<ul class="unstyled">
											<li><a href="blog_right_sidebar.html">Right sidebar</a></li>
											<li><a href="blog_left_sidebar.html">Left sidebar</a></li>
											<li><a href="blog.html">Full width</a></li>
											<li><a href="blog_single_post.html">Single post</a></li>
										</ul>
									</li>
									<li><a href="contacts.html">CONTACTS</a></li>
								</ul>
							</div>
						</nav><!-- /nav.span6 [MainNavigation] -->
					</div><!-- /.row [Logo, MainNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.mainNav -->
		</header><!-- /header -->
		
		<div class="container-fluid topImage">
			<div class="container">
				<div class="row">
					<div class="span12">
						<h1>Right sidebar</h1>
					</div>
				</div>
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
						  <li><a href="#">Home</a> <span class="divider">/</span></li>
						  <li class="active">Right sidebar</li>
						</ul>
					</div>
				</div>
			</div><!-- /.container -->
		</div><!-- /.container-fluid [topImage] -->

		<div class="container">
			<div class="row pageStyle">
				<div class="span8">
					<figure>
						<a href="#" class="grayscale">
							<img src="img/right_sidebar.jpg" alt="foto">
						</a>
					</figure>

					<h1>Mauris gravida egestap</h1>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. Curabitur ante tellus, ultrices ut varius eu, consectetur quis justo. Phasellus ac augue leo. Suspendisse mattis consequat mi quis laoreet. 
						</p>
						<p>
							Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras sed diam nisl. 
						</p>
						<blockquote>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus, metus vitae hendrerit porttitor, felis nulla aliquet nisi, eget pretium justo velit eu ipsum. Fusce id lorem enim.
							</p>
						</blockquote>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. Curabitur ante tellus, ultrices ut varius eu, consectetur quis justo. Phasellus ac augue leo. Suspendisse mattis consequat mi quis laoreet. 
						</p>
						<p>
							Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras sed diam nisl. 
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. Curabitur ante tellus, ultrices ut varius eu, consectetur quis justo. Phasellus ac augue leo. Suspendisse mattis consequat mi quis laoreet. Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
						<p>
							Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras sed diam nisl. 
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. Curabitur ante tellus, ultrices ut varius eu, consectetur quis justo. Phasellus ac augue leo. Suspendisse mattis consequat mi quis laoreet. Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
						<p>
							Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras sed diam nisl. 
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. Curabitur ante tellus, ultrices ut varius eu, consectetur quis justo. Phasellus ac augue leo. Suspendisse mattis consequat mi quis laoreet. Cras accumsan turpis vitae tellus ornare sodales. Phasellus faucibus, nisl a condimentum porta, lacus risus porta sem, at aliquam diam neque eu felis. Sed vehicula, ipsum non viverra commodo, ligula magna scelerisque ipsum, nec interdum magna ligula ac neque. Donec nisi dui, volutpat eget pellentesque sit amet, vehicula sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
						<p>
							Cras sed diam nisl. Fusce nunc libero, scelerisque eget fermentum aliquet, pellentesque et nunc. Nulla a elit tellus, eu pharetra velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut placerat massa. Nunc commodo sagittis rutrum. Phasellus molestie sollicitudin eros cursus iaculis.
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. In tincidunt sodales enim, in porttitor quam placerat non. Vivamus dignissim, tortor eleifend varius sollicitudin, mauris velit auctor magna, sed ullamcorper nunc tellus quis nisl. 
						</p>
				</div><!-- /.span8 -->
				<div class="span4">
					<form action="#">
						<p class="row-fluid">
							<input type="text" class="search span12" required x-webkit-speech="x-webkit-speech">
						</p>
					</form>

					<div class="sidebarMenu boxModel">
						<h1 class="colored">Category</h1>
						<ul>
							<li class="active"><a href="#"><b>&#8594;</b>Category 1</a></li>
							<li><a href="#"><b>&#8594;</b>Category 2</a></li>
							<li><a href="#"><b>&#8594;</b>Category 3</a></li>
							<li><a href="#"><b>&#8594;</b>Category 4</a></li>
							<li><a href="#"><b>&#8594;</b>Category 5</a></li>
						</ul>
					</div>

					<div class="tabs">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="#tab1">Tab1</a></li>
							<li><a href="#tab2">Tab2</a></li>
							<li><a href="#tab3">Tab3</a></li>
						</ul>
						<div class="tab-content">
						  	<div class="tab-pane active" id="tab1">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr1.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr2.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr6.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						  	<div class="tab-pane" id="tab2">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr3.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr4.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						  	<div class="tab-pane" id="tab3">
						  		<ul class="tabPost">
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr5.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> 
						  				</p>
						  			</li>
						  			<li>
						  				<figure>
						  					<img src="img/flickr/flickr6.jpg" alt="photo">
						  				</figure>
						  				<p>
						  					<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a>
						  				</p>
						  			</li>
						  		</ul>
						  	</div>
						</div>
					</div><!-- /.tabs -->

					<div class="boxModel recentPostsSidebar">
						<h1 class="colored">Recent posts</h1>
						<ul class="tabPost unstyled">
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr3.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> <br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr4.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a><br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr5.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a><br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						</ul>
					</div><!-- /.recentPostsSidebar-->
					<div class="accordion" id="accordion">
						<div class="accordion-group">
							<div class="accordion-heading">
					    		<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
					        	abstraction and creative
					      		</a>
					    	</div>
					   		<div id="collapseOne" class="accordion-body collapse">
					      		<div class="accordion-inner">
					        		Anim pariatur cliche...
					      		</div>
					    	</div>
					  	</div>
					  	<div class="accordion-group">
					    	<div class="accordion-heading">
					      		<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
					        		art photos 
					      		</a>
					    	</div>
					    	<div id="collapseTwo" class="accordion-body collapse">
					      		<div class="accordion-inner">
					        		Anim pariatur cliche...
					      		</div>
					    	</div>
					  	</div>
					  	<div class="accordion-group">
					    	<div class="accordion-heading">
					      		<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
					        		portraits and landscapes
					      		</a>
					    	</div>
					    	<div id="collapseThree" class="accordion-body collapse">
					      		<div class="accordion-inner">
					        		Anim pariatur cliche...
					      		</div>
					    	</div>
					  	</div>
					  	<div class="accordion-group">
					    	<div class="accordion-heading accordion-heading-active">
					      		<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
					        		photo retro
					      		</a>
					    	</div>
					    	<div id="collapseFour" class="accordion-body collapse in">
					      		<div class="accordion-inner">
					        		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra sem non nisl lobortis gravida. Sed bibendum dapibus dui. 
					        	</div>
					    	</div>
					  	</div>
					</div><!-- /.accordion-->
					
				</div><!-- /.span4-->
			</div><!-- /.row-->
		</div><!-- /.container -->		

		<footer class="mainFooter">
			<div class="clients">
				<div class="container">
					<ul class="row inline">
						<li>
							<a href="#">
								<img src="img/partner/partner5.png" alt="themeforest">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner4.png" alt="audiojungle">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner3.png" alt="activeden">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner2.png" alt="graphicriver">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner1.png" alt="codecanyon">
							</a>
						</li>
					</ul><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.clients -->

			<div class="footerWidgets">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="#" class="brand">DesignPortfolio</a>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin massa vel odio gravida placerat. Suspendisse porta, nulla non eleifend vehicula, libero sapien luctus sapien, ut sodales augue velit vitae lacus. 
							</p>
						</div><!-- [footerMessage] -->
						<div class="span4">
							<h2>FLICKR PHOTOSTREAM</h2>
							<ul class="inline flickrImages" data-userid="30233972@N02" data-items="8">
												
							</ul><!-- /.row-fluid [flickrimages] -->
						</div><!-- [flickr] -->
						<div class="span4">
							<h2>RECENT POSTS</h2>
							<ul class="recentPosts">
								<li>
									<p>
										<a href="#">
											Pellentesque rhoncus nibh id nibh mollis Etiam aliquam, eros id facilisis 
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Donec volutpat, nisl quis luctu dap
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Etiam faucibus, ligula nec blandit ornare, massa enim ultricies leo, eget porta dolor elit.
										</a>
									</p>
								</li>
							</ul>
						</div><!-- [recent posts] -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.footerWidgets -->

			<div class="copyRight">
				<div class="container">
					<div class="row">
						<div class="span7">
							<p>
								&copy; Copyright 2013. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
							</p>
						</div>
						<div class="span5 text-right">
							<p>
								Designed by Theme Designer. Developed by 960 Development
							</p>
						</div>
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.copyright -->
		</footer><!-- /.footer [mainFooter] -->
	
	<!-- Scripts -->
	<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/settingsbox.js"></script>
	<script src="js/farbtastic/farbtastic.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/izotope.js"></script>
	<script src="js/option.js"></script>
	</body>
</html>